<template>
    <div class="main">
        <div class="left">
            <!-- 左边上面表格 -->
            <div
                style="box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.2);margin-top: 10px;border: 1px solid #ccc;border-radius: 5px;">
                <p style="font-size: 14px;padding: 10px 0px 5px 15px;">{{ obj1.name }}/{{ route.query.clueId }}</p>
                <hr style="color: #ccc;">
                <el-row :gutter="20" style="margin-top: 15px;margin-left: 20px;margin-bottom: 25px;">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">线索创建时间</p>
                            <p style="color: gray;">{{ obj1.createTime }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">客户手机号码</p>
                            <p style="color: gray;">{{ obj1.phone }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">渠道来源</p>
                            <p style="color: gray;">{{ obj1.channelName }}</p>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 15px;margin-left: 18px;margin-bottom: 25px;">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">线索分配者</p>
                            <p style="color: gray;">{{ obj1.allocator }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">线索归属时间</p>
                            <p style="color: gray;">{{ obj1.belongTime }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">线索归属人</p>
                            <p style="color: gray;">{{ obj1.owner }}</p>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 15px;margin-left: 18px;margin-bottom: 25px;">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">所属促销活动信息</p>
                            <p style="color: gray;">{{ obj1.activityName }}/{{ obj1.activityInfo }}</p>
                        </div>
                    </el-col>
                    <el-col :span="8"></el-col>
                    <el-col :span="8">
                        <el-button type="danger">无效线索</el-button>
                        <el-button type="primary">转为商机</el-button>
                    </el-col>
                </el-row>
            </div>
            <!-- 左边下面表格 -->
            <div
                style="box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.2);margin-top: 10px;border: 1px solid #ccc;border-radius: 5px;">
                <p style="font-size: 14px;padding: 10px 0px 5px 15px;">线索跟进</p>
                <hr style="color: #ccc;">
                <el-row :gutter="20" style="margin-top: 15px;margin-left: 20px;margin-bottom: 25px;">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">客户姓名</p>
                            <p style="color: gray;"> <el-input v-model="obj1.name" style="width: 240px" /></p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">性别</p>
                            <p style="color: gray;"> <el-select v-model="obj1.gender">
                                    <el-option label="男" :value="0" />
                                    <el-option label="女" :value="1" />
                                    <el-option label="未知" :value="2" />
                                </el-select></p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">年龄</p>
                            <p style="color: gray;"><el-input-number :min="6" :max="100" v-model="obj1.age" /></p>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 15px;margin-left: 18px;margin-bottom: 25px;">
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">客户微信号码</p>
                            <p style="color: gray;"><el-input v-model="obj1.weixin" style="width: 240px"
                                    placeholder="Please input" /></p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">客户QQ号码</p>
                            <p style="color: gray;"><el-input style="width: 240px" v-model="obj1.qq" /></p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content ep-bg-purple">
                            <p style="font-style: italic;font-weight: bold;font-size: 15px;">客户手机号码</p>
                            <p style="color: gray;"><el-input style="width: 240px" v-model="obj1.phone" /></p>
                        </div>
                    </el-col>
                </el-row>
                <div :gutter="20" style="margin-top: 15px;margin-left: 18px;margin-bottom: 25px;">
                    <p style="font-style: italic;font-weight: bold;font-size: 15px;">客户意向等级</p>
                    <p style="color: gray;">
                        <el-radio-group v-model="obj1.level">
                            <el-radio :label="0">近期报名</el-radio>
                            <el-radio :label="1">打算报名，考虑中</el-radio>
                            <el-radio :label="2">了解一下</el-radio>
                            <el-radio :label="3">打酱油</el-radio>
                        </el-radio-group>
                    </p>


                </div>
                <div :gutter="20" style="margin-top: 15px;margin-left: 18px;margin-bottom: 25px;">
                    <p style="font-style: italic;font-weight: bold;font-size: 15px;">客户意向类型</p>
                    <el-radio-group v-model="obj1.subject">
                        <el-radio :label="1">舞蹈类</el-radio>
                        <el-radio :label="2">游泳类</el-radio>
                        <el-radio :label="3">拳击类</el-radio>
                    </el-radio-group>
                </div>
                <div :gutter="20" style="margin-top: 15px;margin-left: 18px;margin-bottom: 25px;">
                    <p style="font-style: italic;font-weight: bold;font-size: 15px;">跟进记录</p>
                    <el-input v-model="obj1.record" style="width: 98%" :rows="2" type="textarea" />
                </div>
                <div :gutter="20" style="margin-top: 15px;margin-left: 18px;margin-bottom: 25px;">
                    <p style="font-style: italic;font-weight: bold;font-size: 15px;">下次跟进时间</p>
                    <el-date-picker type="datetime" v-model="obj1.nextTime" />
                </div>
                <div style="text-align: right;margin-right: 50px;margin-bottom: 30px;">
                    <el-button type="primary" @click="submitForm()">
                        提交
                    </el-button>
                </div>
            </div>

        </div>

        <div class="right">
            <p style="font-size: 14px;padding: 10px 0px 5px 15px;">线索跟进记录</p>
            <hr style="color: #ccc;">

            <div v-for="(item, index) in obj2" :key="index" style="padding: 12px;">
                <!-- <h3>{{ item.createBy }}</h3>
                <p>{{ item.info }}</p>
                <p>{{ item.createTime }}</p> -->
                <p>
                    <span style="font-weight: bold;font-style: italic;">{{ item.createBy }}:</span>
                    <span>{{ item.info }}</span>
                </p>
                <p>{{ item.createTime }}</p>

            </div>

            <!-- <p>
                        <span style="font-weight: bold;font-style: italic;" >hhhhh</span>
                        <span>{{ obj2.info }}</span>
                    </p>
                    <p>{{ obj2.createTime }}</p> -->

        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { tableOne, clueData, tabletwo } from '@/api/clue/clues';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import router from '@/router';
import { it } from 'node:test';

// 接收11.路由跳转传递过来的参数
const route = useRoute();
// 接收query传参
console.log(route.query.clueId);
// 使用全局的 clueLast

let obj1 = ref({
    gender: null,
    age: null,
    level: 0,
    subject: 0,
    name: '',
    phone: '',
    weixin: '',
    qq: '',
    createTime: '',
    channelName: '',
    allocator: '',
    belongTime: '',
    owner: '',
    activityName: '',
    activityInfo: '',
    record: '',
    nextTime: '',

});
let obj2 = ref([]);

function getlist() {
    tableOne(route.query.clueId).then(res => {
        console.log(res);
        obj1.value = res.data;
        console.log(obj1, " --------");

    });
    tabletwo(route.query.clueId).then(res => {
        console.log(res);
        obj2.value = res.data;
        // for (let i = 0; i <= res.data.length; i++) {
        //     obj2.value = res.data[i]
        // }


    })
}
onMounted(() => {
    getlist();
});
// const obj = JSON.parse(JSON.stringify(obj1.value))
function submitForm() {
    clueData(obj1.value).then(res => {
        console.log(res);
        console.log(obj1.value);

        const obj = JSON.parse(JSON.stringify(obj1.value));
        obj1.value = obj;

        getlist();
        ElMessage({
            type: 'success',
            message: '修改成功',
        });

    });
    router.push({ path: '/clue' });


}
</script>

<style lang="scss" scoped>
.main {
    display: flex;
    justify-content: space-around;
}

.left {
    width: 70%;

}

.right {
    width: 20%;
    box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
</style>